<template>
	<div class="show">
		<!-- 数据展示区域 -->
		<div class="wrapper">
			<el-table
				:data="tableData.filter(data => !search || data.patient.toLowerCase().includes(search.toLowerCase()))"
				style="width: 100%">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column label="就诊时间" prop="clinicTime">
				</el-table-column>
				<el-table-column label="姓名" prop="patient">
				</el-table-column>
				<el-table-column label="身份证号" prop="idCard">
				</el-table-column>
				<el-table-column label="科室" prop="dept">
				</el-table-column>
				<el-table-column label="医生" prop="doctor">
				</el-table-column>
				<el-table-column align="right">
					<template slot="header" slot-scope="scope">
						<el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
					</template>
					<template slot-scope="scope">
						<el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">签到
						</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">取消挂号
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页区域 -->
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[4,6,8]" :page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="page.total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				tableData: [],
				search: '',
		page: {
					currentPage: 1,
					total: 0,
					pageSize: 4,
				},		
			}
		},
		methods: {
			handleEdit(index, row) {
				this.$axios.post("http://localhost:8080/registereds/update", {
					id: this.tableData[index].id,
					status: 2,
				}).then(() => {
					alert("挂号成功")
					this.show();
				})
			},
			handleSizeChange(val) {
				this.page.pageSize = val;
				this.show();
			},
			handleCurrentChange(val) {
				this.page.currentPage = val;
				this.show();
			},
			handleDelete(index, row) {
				this.$confirm('取消挂号, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.post("http://localhost:8080/registereds/update", {
						id: this.tableData[index].id,
						status: 4,
					}).then(() => {
						this.$message({
							type: 'success',
							message: '取消成功!'
						});
						this.show();
					})
				}).catch(() => {});
			},
			show() {
				this.$axios.get("http://localhost:8080/registereds/signIn/" + this.page.currentPage + "/" + this.page.pageSize)
					.then((res) => {
						this.page.total = res.data.data.total;
						this.tableData = res.data.data.list;
						console.log(res.data.data);
					})
			},
		},
		created() {
			this.show();
		}
	}
</script>
<style lang="less" scoped>
	.show {
		margin: 20px;
	}

	.header {
		display: flex;

		button {
			margin-left: 20px;
		}
	}

	.wrapper {
		margin: 20px;
	}
</style>
